<template>
  <div class="relative">
    <slot :expand="expandVal"> </slot>
    <div
      v-if="props.showExpand"
      class="absolute bottom-[-8px] bg-[#fff] shadow-md left-[50%] translate-x-[-50%] w-[16px] h-[16px] inline-flex items-center justify-center rounded-[50%] cursor-pointer"
      @click="handleExpand"
    >
      <svg-icon
        class="transition-all text-xs"
        :class="{ 'rotate-[180deg]': expandVal }"
        icon-class="ArrowDown"
      ></svg-icon>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  showExpand: {
    type: Boolean,
    default: false,
  },
  expand: {
    type: Boolean,
    default: false,
  },
  handleExpandChange: {
    type: Function,
    default: () => {},
  },
});

const expandVal = ref(false);

watch(
  () => props.expand,
  (val) => {
    expandVal.value = val;
  }
);

const handleExpand = () => {
  expandVal.value = !expandVal.value;
  if (typeof props.handleExpandChange === "function")
    props.handleExpandChange(!expandVal.value);
};
</script>
